---
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
import * as CONFIG from '../../config';
import AstroLogo from './AstroLogo.astro';
import SkipToContent from './SkipToContent.astro';
import SidebarToggle from './SidebarToggle';
import LanguageSelect from './LanguageSelect';
import Search from './Search';
import ThemeToggleButton from './ThemeToggleButton';

type Props = {
  currentPage: string;
};

const { currentPage } = Astro.props as Props;
const lang = getLanguageFromURL(currentPage);
---

<header>
  <SkipToContent />
  <nav class="nav-wrapper" title="Top Navigation">
    <div class="logo flex">
      <a href="/">
        <AstroLogo size={40} />
        <h1>media-chrome</h1>
      </a>
    </div>
    <div class="menu-toggle">
      <SidebarToggle client:idle />
    </div>
    <div class="menu">
      <a href="/docs/en/get-started" aria-current={currentPage === '/docs/en/get-started'}>Basics</a>
      <a href="/docs/en/themes" aria-current={currentPage === '/docs/en/themes'}>Themes</a>
      <a href="/docs/en/showcase" aria-current={currentPage === '/docs/en/showcase'}>Showcase</a>
      <a href="/docs/en/examples" aria-current={currentPage === '/docs/en/examples'}>Examples</a>
    </div>
    <div class="search-item">
      <Search client:idle />
    </div>
    <a class="github-link" href="https://github.com/muxinc/media-chrome" target="_blank">
      <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"
        ></path>
      </svg>
    </a>
    <ThemeToggleButton client:visible />
    {
      KNOWN_LANGUAGE_CODES.length > 1 && (
        <LanguageSelect lang={lang} client:idle />
      )
    }
  </nav>
</header>

<style>
  header {
    z-index: 11;
    height: var(--theme-navbar-height);
    width: 100%;
    background-color: var(--theme-navbar-bg);
    backdrop-filter: saturate(180%) blur(5px);
    border-bottom: 1px solid var(--theme-divider);
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    position: sticky;
    top: 0;
  }

  .nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 1rem;
  }

  .logo {
    display: flex;
    align-self: stretch;
    overflow: hidden;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    color: hsla(var(--color-base-white), 100%, 1);
    z-index: -1;
  }

  .logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-decoration: none;
    font-weight: 600;
    color: var(--theme-text);
  }

  .logo h1 {
    display: none;
    font: inherit;
    color: inherit;
    margin: 0;
    font-family: var(--font-mono);
  }

  .menu {
    display: flex;
    align-self: stretch;
    align-items: stretch;
  }

  .menu a {
    display: flex;
    display: none;
    font-size: 0.95em;
    text-decoration: none;
    padding: 1.75rem 1.75rem;
    color: var(--theme-text);
    border-right: 1px solid var(--theme-divider);
  }

  .menu :is(a:hover, a:focus) {
    background-color: var(--theme-accent);
    color: var(--theme-text-invert);
  }

  @media (min-width: 50em) {
    .nav-wrapper {
      padding: 0 2.5rem;
    }

    .logo {
      flex: 0 0 248px;
      z-index: 0;
      border-right: 1px solid var(--theme-divider);
    }

    .logo h1 {
      display: initial;
    }

    .menu-toggle {
      display: none;
    }

    .menu a {
      display: unset;
    }
  }

  /** Style Algolia */
  :root {
    --docsearch-primary-color: var(--theme-accent);
    --docsearch-logo-color: var(--theme-text);
  }

  .search-item {
    display: flex;
    align-self: stretch;
    align-items: center;
    position: relative;
    z-index: 10;
    flex-grow: 2;
    padding: 0 .75rem;
  }

  @media (min-width: 50em) {
    .search-item {
      max-width: none;
      padding: 0 1.75rem;
    }
  }

  .github-link {
    display: none;
    color: var(--theme-text);
    opacity: .5;
    margin-right: .75rem;
  }

  @media (min-width: 21em) {
    .github-link {
      display: inline-flex;
    }
  }

  .github-link:hover {
    color: var(--theme-accent);
    opacity: 1;
  }

  .github-link svg {
    width: 1.75rem;
    height: 1.75rem;
  }
</style>

<style is:global>
  .search-item > * {
    flex-grow: 1;
  }
</style>
